<template>
	<div>
		<mu-container>
			<top-nav bgColor="#FFFFFF" :title="professionTypeName" btnName="主页" :rightShow="true" returnPath="上一级" @rightDo="backHome" style="z-index: 100;"></top-nav>
			<section style="height: 3rem;"></section>
		</mu-container>
		<div style="height:60px;">
			<div class="magnifier" @keyup.13="" @click="" style="display: inline-block;position: absolute;right: 7%;top: 68px;"><i></i></div>
			<input v-model="searchitem" id="input" type="text" placeholder="在此专业大类内搜索" />
		</div>
		<!--标题和问号-->
		<div class="professionTypeTitle">
			<p>国家标准专业库</p>
			<img src="../../static/images/蓝色问号.jpg" />
		</div>
		<!--专业块-->
		<mu-ripple class="mu-ripple-demo">
			<div class="professionBox">
				<h3>哲学</h3>
				<p>在招院校数量:3</p>
			</div>
		</mu-ripple>
		<mu-ripple class="mu-ripple-demo">
			<div class="professionBox">
				<h3>逻辑学</h3>
				<p>在招院校数量:1</p>
			</div>
		</mu-ripple>
		<!--标题和问号-->
		<div class="professionTypeTitle">
			<p>招生计划专业</p>
			<img src="../../static/images/蓝色问号.jpg" />
		</div>
		<!--专业块-->
		<mu-ripple class="mu-ripple-demo">
			<div class="professionBox">
				<h3>哲学</h3>
				<p>在招院校数量:26</p>
			</div>
		</mu-ripple>
		<mu-ripple class="mu-ripple-demo">
			<div class="professionBox">
				<h3>马克思主义理论</h3>
				<p>在招院校数量:4</p>
			</div>
		</mu-ripple>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				searchitem: '',
				professionTypeName: '',
			};
		},
		mounted() {
			this.professionTypeName = this.$route.params.professionTypeName
		},
		methods: {
			backHome() {
				this.$router.push('/vip_selectPage')
			},
		},
	}
</script>

<style scoped="scoped">
	.mu-ripple-demo {
		position: relative;
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		margin-right: 16px;
		background-color: #fff;
		border-radius: 4px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}
	
	.professionTypeTitle {
		background-color: #F2F2F2;
		padding-left: 5.5%;
		width: 100%;
		height: 40px;
	}
	
	.professionTypeTitle>p {
		margin: 0px;
		float: left;
		text-align: start;
		cursor: help;
		line-height: 40px;
	}
	
	.professionTypeTitle>img {
		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
		height: 20px;
		width: 20px;
		float: left;
	}
	
	.professionBox {
		padding-left: 5.5%;
		text-align: start;
		padding-bottom: 10px;
	}
	
	.professionBox>p {
		margin: 0px;
	}
	
	#input {
		width: 90%;
		margin-top: 15px;
		border-radius: 4px;
		border: 0px;
		height: 30px;
		padding: 0px 1%;
	}
	
	#input::-webkit-input-placeholder {
		color: #8A8A8A;
	}
	
	.magnifier {
		width: 15px;
		height: 15px;
		border-radius: 100%;
		border: 1px solid rgb(131, 131, 131);
		position: relative;
	}
	
	.magnifier::after {
		content: "";
		width: 9px;
		height: 1px;
		background-color: rgb(131, 131, 131);
		position: absolute;
		top: 115%;
		left: 79%;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
</style>